import React from 'react';
import { Card, Table, Form, Input, Button, Row, Divider, Popconfirm, message } from 'antd';
import { router, Link } from 'umi';
import authHelper from '@/utils/auth/helper';
import { Pagination } from '@/components';
import AuthComponent from '@/utils/auth/AuthComponent';
import { useAttendanceList } from './hooks';
import { delateAttendance } from './service';

// const TITLE = {
//     NONE: '自由班制',
//     FIXED: '固定班制',
//     TURN: '排班制'
// };

const Setting = ({ form }) => {
    const { checkCode } = authHelper;
    const [query, setQuery] = React.useState({
        pageNo: 1,
        pageSize: 10,
        keyword: ''
    });

    const [loading, data, total] = useAttendanceList(query);

    const handleSearch = e => {
        e.preventDefault();
        const values = form.getFieldsValue();
        setQuery({ ...query, ...values, pageNo: 1 });
    };

    const handleDel = async id => {
        const { code, msg } = await delateAttendance(id);
        if (code === 10000) {
            message.success(msg);
            const values = form.getFieldsValue();
            setQuery({ ...query, ...values, pageNo: 1 });
        } else {
            message.error(msg);
        }
    };

    const handlePaginationChange = _pagination => {
        const { current, ...rest } = _pagination;
        setQuery({
            ...query,
            ...rest,
            pageNo: current
        });
    };

    const columns = [
        {
            title: '所属公司',
            dataIndex: 'companyName'
        },
        {
            title: '考勤组名称',
            dataIndex: 'groupName',
            render: text => (
                <p
                    style={{ width: '400px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
                    title={text}
                >
                    {text}
                </p>
            )
        },
        {
            title: '人数',
            dataIndex: 'empCount',
            width: 100
        },
        // {
        //     title: '类型',
        //     dataIndex: 'groupType',
        //     width: 100,
        //     render: text => TITLE[text] || ''
        // },
        // {
        //     title: '考勤时间',
        //     dataIndex: 'time',
        //     // render: text => <span style={{ whiteSpace: 'pre-wrap' }}>{`${text}`}</span>
        //     render: () => <span style={{ whiteSpace: 'pre-wrap' }}>--</span>
        // },
        {
            title: '操作',
            key: 'action',
            width: 160,
            fixed: 'right',
            render: record => (
                <span>
                    {/* <Link to={`/office/personnelManagement/attendance/setting/edit?id=${record.id}`}>排班</Link>
                    <Divider type="vertical" /> */}
                    <AuthComponent code="office:attendance:groups:edit">
                        <Link to={`/office/personnelManagement/attendance/setting/edit?id=${record.id}`}>编辑</Link>
                    </AuthComponent>
                    {checkCode('office:attendance:groups:edit') && checkCode('office:attendance:groups:delete') && (
                        <Divider type="vertical" />
                    )}
                    <AuthComponent code="office:attendance:groups:delete">
                        <Popconfirm
                            title="确定要删除吗？"
                            onConfirm={() => {
                                handleDel(record.id);
                            }}
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </AuthComponent>
                </span>
            )
        }
    ];

    return (
        <Card title="考勤设置" style={{ margin: 16 }}>
            <Row style={{ marginBottom: 16 }}>
                <Form layout="inline" onSubmit={handleSearch}>
                    <Form.Item>
                        {form.getFieldDecorator('keyword')(
                            <Input
                                style={{ width: 360 }}
                                placeholder="请输入考勤组名称、考勤组负责人、考勤人员"
                                allowClear
                            />
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                    <AuthComponent code="office:attendance:groups:save">
                        <Form.Item style={{ float: 'right', marginRight: 0 }}>
                            <Button
                                type="primary"
                                onClick={() =>
                                    history.push({
                                        pathname: '/office/personnelManagement/attendance/setting/edit'
                                    })
                                }
                            >
                                新增
                            </Button>
                        </Form.Item>
                    </AuthComponent>
                </Form>
            </Row>
            <Table
                columns={columns}
                dataSource={data}
                pagination={false}
                loading={loading}
                rowKey="id"
                scroll={{ x: 'max-content' }}
            />
            <Pagination
                total={total}
                current={Number(query.pageNo)}
                pageSize={Number(query.pageSize)}
                onChange={handlePaginationChange}
                loading={loading}
            />
        </Card>
    );
};

export default Form.create()(Setting);
